一、webpack核心概念
1.Entry
2.Output
3.Loaders
4.Plugins
二、Entry
代码入口
打包入口
单个或多个入口,多个入口:多页面应用程序;或分开的。
示例:
// 单个
module.exports = {
entry: 'index.js'
}
// 多个入口
module.exports = {
entry: ['index.js', 'vendor.js']
}
// 另外写法,推荐写法
module.exports = {
entry: {
index: 'index.js'
}
}
module.exports = {
entry: {
index: 'index.js',
vendor: 'vendor.js'
}
}
module.exports = {
entry: {
index: ['index.js', 'app.js'],
vendor: 'vendor.js'
}
}
三、Output
打包成的文件(bundle)
一个或多个
自定义规则
示例:
// 单个输出
module.exports = {
entry: {
index: 'index.js'
},
output: {
filename: 'index.min.js'
},
}
// 多个输出
module.exports = {
entry: {
index: 'index.js',
vendor: 'vendor.js'
},
output: {
filename: '[name].min.[hash:5].js'
}
}
四、Loaders
1.处理文件
2.转化为模块
示例:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: 'css-loader'
}
]
}
}
五、Plugins
1.参与打包整个过程
2.打包优化和压缩
3.配置编译时的变量
4.极其灵活的
示例:
const webpack = require("webpack");
module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。